<template>
    <div class="content customer-page">
        <div class="content-top">
            <Button type="primary" @click="showAddCustomer">添加客户</Button>
            <Button type="default" @click="importHandle">导入</Button>
            <SearchExpand>
                <Form class="clearfix" :label-width="110">
                    <FormItem label="企业名称">
                        <Input
                            v-model="searchData.username"
                            class="medium-input"
                            type="text"
                            placeholder="请输入企业名称"
                        ></Input>
                    </FormItem>
                    <FormItem label="经营单位名称">
                        <Input
                            v-model.trim="searchData.unitName"
                            class="medium-input"
                            type="text"
                            placeholder="请输入经营单位名称"
                        ></Input>
                    </FormItem>
                    <FormItem label="分类">
                        <Select v-model="searchData.custType" class="medium-input" placeholder="请选择企业类型">
                            <Option value="0">全部</Option>
                            <Option value="生产企业">生产企业</Option>
                            <Option value="报关行">报关行</Option>
                            <Option value="供应链公司">供应链公司</Option>
                            <Option value="货代公司">货代公司</Option>
                            <Option value="其他">其他</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="" class="btn">
                        <Button type="primary" @click="searchList"><i class="iconfont icon-sousuo"></i>查询</Button>
                    </FormItem>
                </Form>
            </SearchExpand>
        </div>
        <div class="content-body">
            <Table :loading="loading" :data="customerList" :columns="columns" @on-expand="expandHandle"></Table>
        </div>
        <Pagination
            :pageSize.sync="searchData.pageSize"
            :current.sync="searchData.pageNum"
            :total="searchData.total"
            @change="getCunstomList"
        />

        <importModal @reGetData="getCunstomList" ref="importModalRef"/>

        <!-- 电子签章 -->
        <SignatureModal
            v-model="imgModal.visible"
            :url="imgModal.url"
            :action="imgModal.action"
            :headers="header"
            @deleted="deleteSignature"
            @upload="handleSuccess"
        ></SignatureModal>
    </div>
</template>

<script>
import { downloadURL } from '@/config/downloadUrl.js'

import {
    queryCustomForCustGrid,
    delCustomById,
    deleteCustSignature
} from '@/api/customer'
import {
    getToken
} from '@/libs/util.js'
import SignatureModal from './components/signature-modal'

import SearchExpand from '_c/search-expand'

import importModal from './components/importModal'

export default {
    name: 'CustomerManage',
    inject: ['nextPageReload'],
    components: {
        SearchExpand,
        importModal,
        SignatureModal
    },
    data () {
        return {
            columns: [
                {
                    type: 'expand',
                    width: 40,
                    render: (h, params) => {
                        return h('Table', {
                            props: {
                                data: params.row.unitList,
                                columns: [
                                    {
                                        title: '序号',
                                        type: 'index',
                                        width: 80,
                                        align: 'center'
                                    },
                                    {
                                        title: '经营单位名称',
                                        key: 'unitName',
                                        align: 'center'
                                    },
                                    {
                                        title: '经营单位海关代码',
                                        key: 'unitCustomsCode',
                                        align: 'center'
                                    },
                                    {
                                        title: '统一社会信用代码',
                                        key: 'unitCreditCode',
                                        align: 'center',
                                        tooltip: true
                                    },
                                    {
                                        title: '检验检疫代码',
                                        key: 'unitCiqCode',
                                        align: 'center'
                                    }
                                ]
                            }
                        })
                    }
                },
                {
                    key: 'custName',
                    title: '企业名称',
                    tooltip: true
                },
                {
                    key: 'custType',
                    title: '企业类型',
                    align: 'center'
                },
                {
                    key: 'customsCode',
                    title: '海关编码',
                    align: 'center'
                },
                {
                    key: 'custName',
                    title: '电子签章',
                    width: 60,
                    align: 'center',
                    render: (h, params) => {
                        return h('i', {
                            'class': ['table-icon', params.row.qzUrl ? 't-view-icon' : 't-upload-icon'],
                            attrs: {
                                title: params.row.qzUrl ? '查看' : '上传'
                            },
                            on: {
                                click: _ => {
                                    this.openImgModal(params.row, params.row._index)
                                }
                            }
                        })
                    }
                },
                {
                    key: 'custLocation',
                    title: '企业所在地',
                    align: 'center'
                },
                {
                    key: 'socialCreditCode',
                    title: '统一社会信用代码',
                    align: 'center',
                    tooltip: true
                },
                {
                    title: '操作',
                    align: 'center',
                    width: 80,
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div',
                            {
                                'class': 'table-action'
                            },
                            [
                                h('i', {
                                    'class': ['table-icon t-edit-icon'],
                                    attrs: {
                                        title: '编辑'
                                    },
                                    on: {
                                        click: _ => {
                                            this.nextPageReload()
                                            this.$router.push({
                                                name: 'customerEdit',
                                                params: {
                                                    id: params.row.custId
                                                }
                                            })
                                        }
                                    }
                                }),
                                h('i', {
                                    'class': ['table-icon t-del-icon'],
                                    attrs: {
                                        title: '删除'
                                    },
                                    on: {
                                        click: _ => {
                                            this.savedelete(params.row.custId)
                                        }
                                    }
                                })
                            ]
                        )
                    }
                }
            ],
            loading: true,
            header: {
                'Authorization': ''
            },
            searchData: {
                username: '',
                unitName: '',
                custType: '0',
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            customerList: [],
            imgModal: {
                // 电子签章预览弹出层
                visible: false,
                url: '',
                index: '',
                action: ''
            }
        }
    },
    methods: {
        // 删除客户
        savedelete (id) {
            this.$Modal.confirm({
                title: '提示',
                content: '删除用户后无法恢复,是否确认删除?',
                onOk: () => {
                    delCustomById({ id }).then(res => {
                        this.$Message.success(res.data.msg)
                        this.getCunstomList()
                    })
                    this.$emit('deleted')
                }
            })
        },
        // 导入
        importHandle () {
            this.$refs.importModalRef.init()
        },

        showAddCustomer () {
            this.nextPageReload()
            this.$router.push({
                name: 'customerAdd'
            })
        },

        getCunstomList () {
            this.loading = true
            const { username, unitName, pageNum, pageSize, custType } = this.searchData
            queryCustomForCustGrid({
                username,
                unitName,
                pageNum,
                pageSize,
                custType: custType === '0' ? '' : custType
            }).then(res => {
                if (res.data.code === '0000') {
                    this.searchData.total = res.data.data.total
                    this.customerList = res.data.data.list.map(item => {
                        return {
                            _expanded: false,
                            custId: item.custId,
                            custName: item.custName,
                            custType: item.custType,
                            customsCode: item.customsCode,
                            qzUrl: item.qzUrl,
                            custLocation: item.custLocation,
                            socialCreditCode: item.socialCreditCode,
                            unitList: item.unitList
                        }
                    })
                    this.customerList.length && this.searchData.unitName && (this.customerList[0]._expanded = true)
                }
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        },
        searchList () {
            this.searchData.pageNum = 1
            this.getCunstomList()
        },
        // 删除签章
        deleteSignature () {
            deleteCustSignature({
                custId: this.customerList[this.imgModal.index].custId
            }).then(res => {
                this.$Message.success(res.data.msg)
                this.delModalImg()
            })
        },
        // 打开签章弹窗
        openImgModal (data, index) {
            this.imgModal.url = data.qzUrl || ''
            this.imgModal.action = downloadURL + '/customs/customerManagement/uploadCustSignature?custId=' + data.custId
            this.imgModal.index = index
            this.imgModal.visible = true
        },
        // 删除图片
        delModalImg () {
            this.customerList[this.imgModal.index].qzUrl = ''
            this.imgModal.url = ''
            this.customerList[this.imgModal.index].qzDic = '上传'
        },
        // 上传成功
        handleSuccess (url) {
            this.imgModal.url = url
            this.customerList[this.imgModal.index].qzUrl = url
            this.customerList[this.imgModal.index].qzDic = '查看'
        },
        expandHandle (row, status) {
            if (status) {
                this.customerList.forEach(item => {
                    item._expanded = item.custId === row.custId
                })
            }
        }
    }, // methods end

    mounted () {
        this.getCunstomList()
        this.header.Authorization = getToken()
    }
}
</script>
<style lang="less">
.customer-page {
    .ivu-table-expanded-cell {
        background-color: #fff;
        padding: 0 80px 0 40px;
        .ivu-table-wrapper {
            border-top-color: transparent;
        }
        .ivu-table:before {
            background-color: #fff;
        }
    }
}
</style>
